<template>
  <div class="user-page">
    <div class="user-layout">
      <!-- Left Sidebar -->
      <aside class="user-sidebar">
        <div class="user-profile">
          <img :src="getAvatar(user.avatar_path)" alt="User Avatar" class="user-avatar">
          
          <div v-if="!isEditing" class="profile-display">
            <h2 class="username">{{ user.username }}</h2>
            <p class="user-id">@{{ user.id }}</p>
            <button @click="startEdit" class="settings-btn">
              <i class="el-icon-setting"></i> 设置
            </button>
            <button @click="manageUsers" class="manage-btn" v-if="isAdmin">
              <i class="el-icon-user"></i> 管理用户
            </button>
            <button @click="logout" class="logout-btn">
              <i class="el-icon-switch-button"></i> 退出登录
            </button>
          </div>

          <div v-else class="profile-edit">
            <div class="edit-field">
              <label>用户名</label>
              <input type="text" v-model="editForm.username" class="edit-input">
            </div>
            <div class="edit-field">
              <label>用户ID</label>
              <input type="text" :value="editForm.id" class="edit-input" disabled>
            </div>
            <div class="edit-field">
              <label>密码</label>
              <input type="password" v-model="editForm.password" class="edit-input" placeholder="留空则不修改密码">
            </div>
            <div class="edit-actions">
              <button @click="saveEdit" class="action-btn save">保存</button>
              <button @click="cancelEdit" class="action-btn cancel">取消</button>
            </div>
          </div>
        </div>
      </aside>

      <div class="separator"></div>

      <!-- Right Content -->
      <main class="user-content">
        <!-- Writers Section -->
        <section v-if="!isManagingUsers" class="content-section">
          <h1>我的作家</h1>
          <div class="writers-grid">
            <div 
              v-for="writer in writers" 
              :key="writer.id" 
              class="writer-item"
              :class="{'selected': selectedWriters.includes(writer.id)}"
              @click="toggleWriterSelection(writer.id)"
            >
              <input type="checkbox" :checked="selectedWriters.includes(writer.id)" class="select-checkbox">
              <img :src="getAvatar(writer.avatar_path)" :alt="writer.name" class="writer-img">
              <h3>{{ writer.name }}</h3>
            </div>
          </div>
          <PaginationBar
            :current-page="writersPage"
            :total="totalWriters"
            :page-size="writersPageSize"
            :show-pagination="totalWriters > writersPageSize"
            @page-change="handleWritersPageChange"
          />
          <div class="action-bar">
            <button @click="addWriter">新增作家信息</button>
            <button @click="editWriter" :disabled="selectedWriters.length !== 1">修改作家信息</button>
            <button @click="deleteWriters" v-if="isAdmin" :disabled="selectedWriters.length === 0">删除作家</button>
          </div>
        </section>

        <!-- Works Section -->
        <section v-if="!isManagingUsers" class="content-section">
          <h1>上传的作品</h1>
          <div class="works-grid">
             <div v-for="work in works" :key="work.id" class="work-item" :class="{'selected': selectedWorks.includes(work.id)}" @click="toggleWorkSelection(work.id)">
                <input type="checkbox" :checked="selectedWorks.includes(work.id)" class="select-checkbox">
                <div class="work-image-container">
                    <img :src="getImageUrl(work)" />
                </div>
                <div class="image_title">
                    <span class="title-text">{{ work.title }}</span>
                    <span class="uploader-info"> @{{ work.user_name }}上传</span>
                </div>
            </div>
          </div>
           <PaginationBar
            :current-page="worksPage"
            :total="totalWorks"
            :page-size="worksPageSize"
            :show-pagination="totalWorks > worksPageSize"
            @page-change="handleWorksPageChange"
          />
          <div class="action-bar">
            <button @click="addWork">新增作品信息</button>
            <button @click="editWork" :disabled="selectedWorks.length !== 1">修改作品信息</button>
            <button @click="deleteWorks" v-if="isAdmin" :disabled="selectedWorks.length === 0">删除作品</button>
          </div>
        </section>

        <!-- Quotes Section -->
        <section v-if="!isManagingUsers && isAdmin" class="content-section">
          <h1>名言管理</h1>
          <div class="quotes-list">
            <div 
              v-for="quote in quotes" 
              :key="quote.id" 
              class="quote-item"
              :class="{'selected': selectedQuotes.includes(quote.id), 'editing': editingQuoteId === quote.id}"
              @click="toggleQuoteSelection(quote.id)"
            >
              <input type="checkbox" :checked="selectedQuotes.includes(quote.id)" class="select-checkbox">
              
              <div v-if="editingQuoteId !== quote.id" class="quote-content">
                <p class="quote-text">{{ quote.content }}</p>
                <p class="quote-writer">—— {{ quote.writer_name }}</p>
              </div>
              
              <div v-else class="quote-edit">
                <div class="edit-form-group">
                  <label>名言内容</label>
                  <textarea 
                    v-model="editQuoteForm.content" 
                    class="quote-edit-textarea"
                    placeholder="输入名言内容"
                  ></textarea>
                </div>
                <div class="edit-form-group">
                  <label>所属作家</label>
                  <select 
                    v-model="editQuoteForm.writer_name" 
                    class="quote-edit-select"
                    @change="handleQuoteWriterChange"
                  >
                    <option value="">请选择作家</option>
                    <option 
                      v-for="writer in writers" 
                      :key="writer.id" 
                      :value="writer.name"
                    >
                      {{ writer.name }}
                    </option>
                  </select>
                </div>
                <div class="quote-edit-actions">
                  <button @click="saveQuoteEdit" class="action-btn save">保存</button>
                  <button @click="cancelQuoteEdit" class="action-btn cancel">取消</button>
                </div>
              </div>
              
              <button 
                v-if="editingQuoteId !== quote.id"
                @click.stop="startQuoteEdit(quote)" 
                class="edit-quote-btn"
              >
                <i class="el-icon-edit"></i>
              </button>
            </div>
          </div>
          <PaginationBar
            :current-page="quotesPage"
            :total="totalQuotes"
            :page-size="quotesPageSize"
            :show-pagination="totalQuotes > quotesPageSize"
            @page-change="handleQuotesPageChange"
          />
          <div class="action-bar">
            <button @click="addQuote" class="add-quote-btn">新增名言</button>
            <button @click="deleteQuotes" :disabled="selectedQuotes.length === 0">删除名言</button>
          </div>
        </section>

        <!-- User Management Section -->
        <section v-if="isManagingUsers" class="content-section">
          <h1>用户管理</h1>
          <div class="users-grid">
            <div 
              v-for="userItem in allUsers" 
              :key="userItem.id" 
              class="user-item"
              :class="{'selected': selectedUsers.includes(userItem.id), 'editing': editingUserId === userItem.id}"
              @click="toggleUserSelection(userItem.id)"
            >
              <input type="checkbox" :checked="selectedUsers.includes(userItem.id)" class="select-checkbox">
              
              <div v-if="editingUserId !== userItem.id" class="user-info">
                <h3>{{ userItem.username }}</h3>
                <p class="user-id">@{{ userItem.id }}</p>
                <p class="user-role">{{ userItem.role === 1 ? '管理员' : '普通用户' }}</p>
              </div>
              
              <div v-else class="user-edit">
                <div class="edit-form-group">
                  <label>用户名</label>
                  <input type="text" :value="userItem.username" disabled class="edit-input disabled">
                </div>
                <div class="edit-form-group">
                  <label>用户ID</label>
                  <input type="text" :value="userItem.id" disabled class="edit-input disabled">
                </div>
                <div class="edit-form-group">
                  <label>用户角色</label>
                  <select v-model="editUserForm.role" class="edit-select">
                    <option :value="0">普通用户</option>
                    <option :value="1">管理员</option>
                  </select>
                </div>
                <div class="edit-actions">
                  <button @click="saveUserEdit" class="action-btn save">保存</button>
                  <button @click="cancelUserEdit" class="action-btn cancel">取消</button>
                </div>
              </div>
              
              <button 
                v-if="editingUserId !== userItem.id"
                @click.stop="startUserEdit(userItem)" 
                class="edit-user-btn"
              >
                <i class="el-icon-edit"></i>
              </button>
            </div>
          </div>
          <PaginationBar
            :current-page="usersPage"
            :total="totalUsers"
            :page-size="usersPageSize"
            :show-pagination="totalUsers > usersPageSize"
            @page-change="handleUsersPageChange"
          />
          <div class="action-bar">
            <button @click="exitUserManagement" class="back-btn">返回</button>
            <button @click="deleteUsers" :disabled="selectedUsers.length === 0">删除用户</button>
          </div>
        </section>
      </main>
    </div>

    <!-- 使用新的删除弹窗组件 -->
    <DeleteModal
      :visible="showDeleteConfirm"
      type="confirm"
      title="确认删除"
      :message="getDeleteMessage()"
      @confirm="confirmDelete"
      @cancel="showDeleteConfirm = false"
      @close="showDeleteConfirm = false"
    />
  </div>
</template>

<script>
import PaginationBar from '@/components/PaginationBar.vue';
import DeleteModal from '@/components/DeleteModal.vue';

export default {
  name: 'User',
  components: {
    PaginationBar,
    DeleteModal,
  },
  data() {
    return {
      user: { id: '', username: '', role: 0, avatar_path: '' },
      isEditing: false,
      editForm: { id: '', username: '', password: '' },
      isManagingUsers: false,
      
      writers: [],
      writersPage: 1,
      writersPageSize: 8,
      totalWriters: 0,
      selectedWriters: [],

      works: [],
      worksPage: 1,
      worksPageSize: 8,
      totalWorks: 0,
      selectedWorks: [],

      allUsers: [],
      usersPage: 1,
      usersPageSize: 8,
      totalUsers: 0,
      selectedUsers: [],
      editingUserId: null,
      editUserForm: { role: 0 },
      
      quotes: [],
      quotesPage: 1,
      quotesPageSize: 8,
      totalQuotes: 0,
      selectedQuotes: [],
      editingQuoteId: null,
      editQuoteForm: { content: '', writer_name: '' },
      
      backendUrl: 'http://localhost:3000',
      showDeleteConfirm: false,
      deleteType: '',
    };
  },
  computed: {
    isAdmin() {
      return this.user.role === 1;
    },
  },
  methods: {
    async fetchUser() {
      try {
        const res = await this.$axios.get('/api/user/me');
        this.user = res.data;
      } catch (error) {
        console.error('Failed to fetch user info:', error);
      }
    },
    async fetchWriters() {
      console.log('[fetchWriters] 当前页:', this.writersPage);
      console.log('[fetchWriters] 每页大小:', this.writersPageSize);
        try {
            const res = await this.$axios.get('/api/user/writers', {
                params: { page: this.writersPage, pageSize: this.writersPageSize }
            });
            this.writers = res.data.writers;
            this.totalWriters = res.data.total;
        } catch (error) {
            console.error('Failed to fetch writers:', error);
        }
    },
    async fetchWorks() {
        try {
            const res = await this.$axios.get('/api/user/works', {
                params: { page: this.worksPage, pageSize: this.worksPageSize }
            });
            this.works = res.data.works;
            this.totalWorks = res.data.total;
        } catch (error) {
            console.error('Failed to fetch works:', error);
        }
    },
    async fetchQuotes() {
        try {
            const res = await this.$axios.get('/api/user/quotes', {
                params: { page: this.quotesPage, pageSize: this.quotesPageSize }
            });
            this.quotes = res.data.quotes;
            this.totalQuotes = res.data.total;
        } catch (error) {
            console.error('Failed to fetch quotes:', error);
        }
    },
    async fetchWritersForQuotes() {
        try {
            const res = await this.$axios.get('/api/writers', {
                params: { page: 1, pageSize: 1000 } // 获取所有作家
            });
            this.writers = res.data.writers || res.data;
        } catch (error) {
            console.error('Failed to fetch writers:', error);
        }
    },
    async fetchAllUsers() {
        try {
            const res = await this.$axios.get('/api/user/admin/users', {
                params: { page: this.usersPage, pageSize: this.usersPageSize }
            });
            this.allUsers = res.data.users;
            this.totalUsers = res.data.total;
        } catch (error) {
            console.error('Failed to fetch users:', error);
            if (error.response?.status === 403) {
                alert('权限不足，只有管理员可以管理用户');
            } else {
                alert('获取用户列表失败: ' + error.response?.data?.message);
            }
        }
    },
    logout() {
      localStorage.removeItem('token');
      this.$router.push('/');
    },
    startEdit() {
      this.isEditing = true;
      this.editForm = { id: this.user.id, username: this.user.username, password: '' };
    },
    cancelEdit() {
      this.isEditing = false;
      this.editForm.password = '';
    },
    async saveEdit() {
        try {
            const updateData = {
                username: this.editForm.username
            };
            
            // 只有当密码不为空时才包含密码
            if (this.editForm.password.trim()) {
                updateData.password = this.editForm.password;
            }
            
            const res = await this.$axios.put('/api/user/me', updateData);
            await this.fetchUser();
            this.isEditing = false;
            this.editForm.password = '';
            // if token is changed, update it.
            if(res.data.token) {
                localStorage.setItem('token', res.data.token);
            }
        } catch (error) {
            alert('更新失败: ' + error.response?.data?.message);
        }
    },
    manageUsers() {
        this.isManagingUsers = true;
        this.selectedUsers = [];
        this.fetchAllUsers();
    },
    handleWritersPageChange(page) {
      this.writersPage = page;
      this.fetchWriters();
    },
    handleWorksPageChange(page) {
        this.worksPage = page;
        this.fetchWorks();
    },
    handleQuotesPageChange(page) {
        this.quotesPage = page;
        this.fetchQuotes();
    },
    handleUsersPageChange(page) {
        this.usersPage = page;
        this.fetchAllUsers();
    },
    getAvatar(path) {
      if (!path) return require('@/assets/img/Literature Trace.png'); // Placeholder
      if (path.startsWith('/img/')) {
        return `${this.backendUrl}${path}`;
      }
      return require(`@/assets/img/${path}`);
    },
    getImageUrl(work) {
      if (work.cover_path) {
        return `${this.backendUrl}${work.cover_path}`;
      }
      return require(`@/assets/img/defaultCover.jpg`);
    },
    toggleWriterSelection(writerId) {
        const index = this.selectedWriters.indexOf(writerId);
        if (index > -1) {
            this.selectedWriters.splice(index, 1);
        } else {
            this.selectedWriters.push(writerId);
        }
    },
    toggleWorkSelection(workId) {
        const index = this.selectedWorks.indexOf(workId);
        if (index > -1) {
            this.selectedWorks.splice(index, 1);
        } else {
            this.selectedWorks.push(workId);
        }
    },
    toggleQuoteSelection(quoteId) {
        const index = this.selectedQuotes.indexOf(quoteId);
        if (index > -1) {
            this.selectedQuotes.splice(index, 1);
        } else {
            this.selectedQuotes.push(quoteId);
        }
    },
    toggleUserSelection(userId) {
        const index = this.selectedUsers.indexOf(userId);
        if (index > -1) {
            this.selectedUsers.splice(index, 1);
        } else {
            this.selectedUsers.push(userId);
        }
    },
    addWriter() {
        this.$router.push('/edit-writer');
    },
    editWriter() {
        if (this.selectedWriters.length !== 1) return;
        this.$router.push(`/edit-writer/${this.selectedWriters[0]}?from=${encodeURIComponent(this.$route.fullPath)}`);
    },
    async deleteWriters() {
      if (this.selectedWriters.length === 0) return;
      this.deleteType = 'writers';
      this.showDeleteConfirm = true;
    },
    addWork() {
        this.$router.push('/edit-work');
    },
    editWork() {
        if (this.selectedWorks.length !== 1) return;
        this.$router.push(`/edit-work/${this.selectedWorks[0]}`);
    },
    async deleteWorks() {
      if (this.selectedWorks.length === 0) return;
      this.deleteType = 'works';
      this.showDeleteConfirm = true;
    },
    async startQuoteEdit(quote) {
        this.editingQuoteId = quote.id;
        this.editQuoteForm.content = quote.content;
        this.editQuoteForm.writer_name = quote.writer_name;
        // 确保获取完整的作家列表
        await this.fetchWritersForQuotes();
    },
    cancelQuoteEdit() {
        this.editingQuoteId = null;
        this.editQuoteForm.content = '';
        this.editQuoteForm.writer_name = '';
    },
    async saveQuoteEdit() {
        try {
            await this.$axios.put(`/api/user/quotes/${this.editingQuoteId}`, {
                content: this.editQuoteForm.content,
                writer_name: this.editQuoteForm.writer_name
            });
            this.editingQuoteId = null;
            this.editQuoteForm.content = '';
            this.editQuoteForm.writer_name = '';
            this.fetchQuotes();
        } catch (error) {
            alert('更新失败: ' + error.response?.data?.message);
        }
    },
    async deleteQuotes() {
      if (this.selectedQuotes.length === 0) return;
      this.deleteType = 'quotes';
      this.showDeleteConfirm = true;
    },
    addQuote() {
        console.log('点击新增名言按钮');
        const targetPath = '/edit-quote?from=' + encodeURIComponent(this.$route.fullPath);
        console.log('跳转路径:', targetPath);
        this.$router.push(targetPath);
    },
    exitUserManagement() {
        this.isManagingUsers = false;
        this.selectedUsers = [];
    },
    handleQuoteWriterChange() {
        // 这个方法用于处理作家选择变化，暂时不需要特殊处理
    },
    startUserEdit(user) {
        this.editingUserId = user.id;
        this.editUserForm.role = user.role;
    },
    cancelUserEdit() {
        this.editingUserId = null;
        this.editUserForm.role = 0;
    },
    async saveUserEdit() {
        try {
            await this.$axios.put(`/api/user/admin/users/${this.editingUserId}`, {
                role: this.editUserForm.role
            });
            this.editingUserId = null;
            this.editUserForm.role = 0;
            this.fetchAllUsers();
        } catch (error) {
            alert('更新失败: ' + error.response?.data?.message);
        }
    },
    async confirmDelete() {
      try {
        if (this.deleteType === 'writers') {
          await this.$axios.delete('/api/user/writers', { data: { ids: this.selectedWriters } });
          this.selectedWriters = [];
          this.fetchWriters();
        } else if (this.deleteType === 'works') {
          await this.$axios.delete('/api/user/works', { data: { ids: this.selectedWorks } });
          this.selectedWorks = [];
          this.fetchWorks();
        } else if (this.deleteType === 'quotes') {
          await this.$axios.delete('/api/user/quotes', { data: { ids: this.selectedQuotes } });
          this.selectedQuotes = [];
          this.fetchQuotes();
        } else if (this.deleteType === 'users') {
          console.log('选中的用户ID:', this.selectedUsers);
          const response = await this.$axios.delete('/api/user/admin/users', { data: { ids: this.selectedUsers } });
          console.log('删除响应:', response.data);
          this.selectedUsers = [];
          this.fetchAllUsers();
        }
      } catch (error) {
        console.error('删除失败:', error);
        alert('删除失败: ' + error.response?.data?.message);
      }
      this.showDeleteConfirm = false;
    },
    async deleteUsers() {
      if (this.selectedUsers.length === 0) return;
      this.deleteType = 'users';
      this.showDeleteConfirm = true;
    },
    getDeleteMessage() {
      if (this.deleteType === 'writers') {
        return `确定要删除选中的 ${this.selectedWriters.length} 位作家吗？`;
      } else if (this.deleteType === 'works') {
        return `确定要删除选中的 ${this.selectedWorks.length} 项作品吗？`;
      } else if (this.deleteType === 'quotes') {
        return `确定要删除选中的 ${this.selectedQuotes.length} 条名言吗？`;
      } else if (this.deleteType === 'users') {
        return `确定要删除选中的 ${this.selectedUsers.length} 个用户吗？`;
      }
      return '确定要删除选中的项目吗？';
    },
  },
  mounted() {
    const token = localStorage.getItem('token');
    if (token) {
        this.$axios.defaults.headers.common['x-auth-token'] = token;
    }
    setTimeout(() => {

  }, 100);
  this.fetchWriters();
    this.fetchWorks();
    this.fetchUser();
    this.fetchWriters();
    this.fetchQuotes();
    this.fetchWritersForQuotes();
  },
  watch: {
    isManagingUsers(newVal) {
      if (!newVal) {
        this.fetchWriters();
        this.fetchWorks();
        this.fetchQuotes();
      }
    }
  }
};
</script>

<style scoped>
.user-page {
  padding: 40px;
  min-height: 100vh;
}
.user-layout {
  display: flex;
  max-width: 1200px;
  margin: 0 auto;
  background: #fff;
  border-radius: 8px;
  border: 3px solid #166d80;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.user-sidebar {
  width: 280px;
  padding: 30px;
  flex-shrink: 0;
}
.user-profile {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.user-avatar {
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  border: 4px solid #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.username {
  font-size: 24px;
  font-weight: 700;
  margin: 0;
}
.user-id {
  color: #6c757d;
  margin: 4px 0 20px;
}
.settings-btn, .manage-btn, .logout-btn {
  width: 100%;
  padding: 10px;
  border-radius: 6px;
  border: 3px solid #166d80;
  background-color: #fff;
  cursor: pointer;
  font-size: 15px;
  transition: all 0.2s;
  margin-bottom: 10px;
  color: #166d80;
}
.settings-btn:hover, .manage-btn:hover {
  background-color: #166d80;
  color:white;
}
.manage-btn {
  background-color: #fff;
  color: #166d80;
}
.logout-btn {
  background-color: transparent;
  color: #dc3545;
  border-color: #dc3545;
}
.logout-btn:hover {
  background-color: #dc3545;
  color: #fff;
}
.profile-edit .edit-field {
  width: 100%;
  margin-bottom: 15px;
}
.profile-edit .edit-field label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
  color: #333;
  text-align: left;
}
.profile-edit .edit-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
}
.profile-edit .edit-actions {
  display: flex;
  justify-content: space-between;
  width: 100%;
}
.edit-actions .action-btn {
  padding: 8px 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
.action-btn.save {
  background-color: #166d80;
  color: white;
  border: 2px solid #166d80;
}
.action-btn.save:hover {
  background-color: #0d5466;
}
.action-btn.cancel {
  background-color: #6c757d;
  color: white;
  border: 2px solid #6c757d;
}
.action-btn.cancel:hover {
  background-color: #5a6268;
}
.separator {
  width: 1px;
  background-color: #e9ecef;
  margin: 20px 0;
}

.user-content {
  flex-grow: 1;
  padding: 30px;
}
.content-section {
  margin-bottom: 40px;
}
.content-section h1 {
  font-size: 28px;
  margin-bottom: 20px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eee;
  text-align: center;
}
.action-bar {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  justify-content: center;
}
.action-bar button {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #166d80;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.action-bar button:hover:not(:disabled) {
  background-color: #0d5466;
}
.action-bar button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.writers-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 20px;
}
.writer-item {
    position: relative;
    text-align: center;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 10px;
    transition: all 0.3s;
}
.writer-item.selected {
  border-color: #33a3dc;
  background-color: #c7e0ef;
}
.writer-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.writer-img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}
.writer-item h3 {
    margin-top: 10px;
    font-size: 14px;
}
.user-role {
    margin-top: 5px;
    font-size: 12px;
    color: #666;
}
.select-checkbox {
    position: absolute;
    top: 10px;
    left: 10px;
    cursor: pointer;
}

.works-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 20px;
}
.work-item {
    position: relative;
    width: 150px;
    height: 220px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    cursor: pointer;
    border: 2px solid transparent;
    transition: all 0.3s;
}
.work-item.selected {
    border-color: #33a3dc;
}
.work-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.image_title {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgba(0,0,0,0.6);
    color: white;
    padding: 8px;
    font-size: 14px;
    text-align: center;
}
.uploader-info {
    font-size: 12px;
    color: #ddd;
    display: block;
}

.back-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #6c757d;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.back-btn:hover {
  background-color: #545b62;
}

.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 20px;
}
.user-item {
  position: relative;
  text-align: center;
  cursor: pointer;
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.3s;
}
.user-item.selected {
  border-color: #33a3dc;
  background-color: #c7e0ef;
}
.user-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.user-info {
  text-align: center;
  padding-top: 30px;
}
.user-info h3 {
  margin: 0 0 5px 0;
  font-size: 16px;
  font-weight: bold;
}
.user-id {
  color: #6c757d;
  margin: 0 0 5px 0;
  font-size: 14px;
}
.user-role {
  margin: 0;
  font-size: 12px;
  color: #666;
  font-weight: bold;
}
.user-edit {
  padding-top: 30px;
  text-align: left;
}
.edit-input {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
}
.edit-input.disabled {
  background-color: #f5f5f5;
  color: #666;
  cursor: not-allowed;
}
.edit-select {
  width: 100%;
  padding: 8px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-size: 14px;
  background-color: white;
}
.edit-user-btn {
  position: absolute;
  top: 15px;
  right: 15px;
  width: 24px;
  height: 24px;
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 10;
}
.edit-user-btn:hover {
  background-color: white;
}
.edit-user-btn i {
  font-size: 14px;
  color: #166d80;
}
.select-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  cursor: pointer;
}

.quotes-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.quote-item {
    position: relative;
    border: 2px solid transparent;
    border-radius: 8px;
    padding: 15px;
    background: #f8f9fa;
    cursor: pointer;
    transition: all 0.3s;
}

.quote-item.selected {
  border-color: #33a3dc;
  background-color: #c7e0ef;
}
.quote-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}
.quote-content {
    padding-right: 40px;
    text-align: center;
}
.quote-text {
    font-size: 16px;
    line-height: 1.6;
    margin: 0 0 10px 0;
    color: #333;
    text-align: center;
}
.quote-writer {
    font-size: 14px;
    color: #666;
    margin: 0;
    font-style: italic;
    text-align: right;
}
.quote-edit {
    text-align: center; /* 让所有子元素居中 */
    display: flex;
    flex-direction: column;
    align-items: center; /* 水平居中 */
    gap: 15px; /* 调整元素间距 */
}

.edit-form-group {
    width: 80%; /* 限制编辑框宽度，避免太宽 */
    margin-bottom: 0; /* 移除默认 margin */
}

.edit-form-group label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
    color: #333;
    font-size: 14px;
    text-align: center; /* 让 label 也居中 */
}

.quote-edit-textarea {
    width: 100%;
    min-height: 80px;
    padding: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    line-height: 1.6;
    resize: vertical;
    margin: 0 auto; /* 水平居中 */
}

.quote-edit-select {
    width: 100%;
    padding: 8px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
    background-color: white;
    margin: 0 auto;
}

.quote-edit-actions {
    display: flex;
    gap: 10px;
    margin-top: 0; 
}
.edit-quote-btn {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 24px;
    height: 24px;
    background-color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    z-index: 10;
}
.edit-quote-btn:hover {
    background-color: white;
}
.edit-quote-btn i {
    font-size: 14px;
    color: #166d80;
}

.add-quote-btn {
  padding: 10px 15px;
  border: none;
  border-radius: 5px;
  background-color: #166d80;
  color: white;
  cursor: pointer;
  transition: background-color 0.3s;
}
.add-quote-btn:hover {
  background-color: #0d5466;
}
</style> 